<template>
  <div class="content">
    <van-nav-bar title="ZAOZUO造作新家" :fixed="true" class="head">
      <van-icon class="iconfont icon-weibiaoti--1" slot="left" />
      <van-icon class="iconfont icon-sousuo" slot="right" @click="search" />
    </van-nav-bar>
    <Banner></Banner>
    <Introduce></Introduce>
    <h2>双11提前热身 新家造起来！</h2>
    <Active></Active>
    <div class="active">
      <h2>双11造作必买清单</h2>
    </div>
    <MustBuy></MustBuy>
    <h2>全品目录</h2>
    <AllList></AllList>
    <ShopNBC></ShopNBC>
    <Footer></Footer>
      
    <div class="top" v-tap="{methods:top}">
      返回顶部
    </div>
    
  </div>
</template>

<script>
import Banner from "./Banner";
import Introduce from "./Introduce";
import Active from "./Active";
import MustBuy from "./MustBuy";
import AllList from "./AllList";
import ShopNBC from "./ShopNBC";
var Ontop;
window.onscroll = function() {
    Ontop = document.documentElement.scrollTop || document.body.scrollTop;//兼容性设置;
}

export default {
  name: "index",
  methods: {
    search(){
      this.$router.push("/search");
    },
    top(){
      var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
      var timer = setInterval(function(){
        document.documentElement.scrollTop = document.body.scrollTop = Ontop - Math.ceil(Ontop/6);
        if(document.documentElement.scrollTop<=0){
          clearInterval(timer);
        }
      },30)
       
    }
  },
  components: {
    Banner,
    Introduce,
    Active,
    MustBuy,
    AllList,
    ShopNBC,
  },
  mounted(){
    window.addEventListener('scroll', this.scrollToTop)
  }
};
</script>

<style scoped>

.van-nav-bar .van-icon{
        font-size: 36px;
        color: #101010;
    }
    .icon-weibiaoti--1,.icon-sousuo{
        color: #000000;
        font-size: 32px;
    }
    h2{
        color: #000000;
        margin-left: 30px;
    }
    .content{
        padding-bottom: 50px;
    }
    .content div:nth-last-child(2){
        overflow: hidden;
        padding-bottom: 50px;
    }
    .top{
      width:90px;
      height: 100px;
      padding: 20px;
      position: fixed;
      bottom: 130px;
      right:20px;
      font-size:24px;
      border:solid 1px #cecece;
      box-sizing: border-box;
      cursor: pointer;
    }
</style>